<template>
  <!-- 顶部图表 -->
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <!-- 第一个card -->
        <el-card>
          <Detail title="总销售额" :count="Money"><Detail />
            <template slot="charts">
              <span>周同比&nbsp;&nbsp;56% <svg t="1666233454336" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2597" width="16" height="16"><path d="M529.143158 7.436293l347.212925 397.874796a21.748783 21.748783 0 0 1-16.375554 36.077393h-170.66398a21.492915 21.492915 0 0 0-21.492915 18.678367c-12.793402 92.624229-90.065549 502.268955-455.95684 562.909679a21.748783 21.748783 0 0 1-17.654895-38.380206c62.687669-49.126663 144.56544-144.309572 167.593564-313.694212a1571.285609 1571.285609 0 0 0 12.793402-207.508977 22.260519 22.260519 0 0 0-21.748783-22.260519H165.298811a21.748783 21.748783 0 0 1-16.375554-36.077393L496.39205 7.436293a21.748783 21.748783 0 0 1 32.751108 0z" p-id="2598" fill="#1afa29" /></svg></span>
              <span>日同比&nbsp;&nbsp; 98% <svg t="1666233563300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3930" width="16" height="16"><path d="M886.4 736h-182.4c-19.2 0-32 12.8-32 32s12.8 32 32 32h224c35.2 0 64-28.8 64-64v-224c0-19.2-12.8-32-32-32s-32 12.8-32 32v172.8l-297.6-297.6c-6.4-6.4-16-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6l-204.8 204.8-294.4-294.4c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l316.8 316.8c6.4 6.4 16 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l204.8-204.8 278.4 281.6z" p-id="3931" fill="#d81e06" /></svg></span>
            </template>
            <template slot="footer">
              <span>日销售额<b class="textB">{{ this.DayPrice }}</b></span>
            </template>
          </detail></el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="注册量" :count="this.usertableList.length">
            <template slot="charts">
              <lincharts />
            </template>
            <template slot="footer">
              <span>日注册量 <b class="textB">{{ this.theDayRegList.length }}</b></span>
            </template>
            <Detail />
          </detail></el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" :count="this.orderNum.length">
            <template slot="charts">
              <barChart />
            </template>
            <template slot="footer">
              <span>日支付笔数 <b class="textB">{{ this.theDayList.length }}</b></span>
            </template>
            <Detail />
          </detail></el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="78%">
            <template slot="charts">
              <progressChatr />
            </template>
            <template slot="footer">
              <span>周同比&nbsp;&nbsp;6% <svg t="1666233454336" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2597" width="16" height="16"><path d="M529.143158 7.436293l347.212925 397.874796a21.748783 21.748783 0 0 1-16.375554 36.077393h-170.66398a21.492915 21.492915 0 0 0-21.492915 18.678367c-12.793402 92.624229-90.065549 502.268955-455.95684 562.909679a21.748783 21.748783 0 0 1-17.654895-38.380206c62.687669-49.126663 144.56544-144.309572 167.593564-313.694212a1571.285609 1571.285609 0 0 0 12.793402-207.508977 22.260519 22.260519 0 0 0-21.748783-22.260519H165.298811a21.748783 21.748783 0 0 1-16.375554-36.077393L496.39205 7.436293a21.748783 21.748783 0 0 1 32.751108 0z" p-id="2598" fill="#1afa29" /></svg></span>
              <span>日同比&nbsp;&nbsp; 71% <svg t="1666233563300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3930" width="16" height="16"><path d="M886.4 736h-182.4c-19.2 0-32 12.8-32 32s12.8 32 32 32h224c35.2 0 64-28.8 64-64v-224c0-19.2-12.8-32-32-32s-32 12.8-32 32v172.8l-297.6-297.6c-6.4-6.4-16-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6l-204.8 204.8-294.4-294.4c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l316.8 316.8c6.4 6.4 16 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l204.8-204.8 278.4 281.6z" p-id="3931" fill="#d81e06" /></svg></span>
            </template>
            <Detail />
          </detail></el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryMoney, setOrder, setuser, theDayNum, theDayReg, theDayPrice } from '@/api/activityCharge'

import Detail from '../Detail'
import lincharts from '../lineChart'
import barChart from '../barChart'
import progressChatr from '../progressChatr'
export default {
  name: '',
  components: { // 注册
    Detail, // 第一个组件
    lincharts, // 第二个组件
    barChart, // 第三个组件
    progressChatr // 第四个组件
  },
  data() {
    return {
      Money: 0, // 流水
      orderNum: 0, // 订单量
      usertableList: [], // 注册数量
      theDayList: [], // 当天下单数量
      theDayRegList: [], // 当天注册数量
      DayPrice: 0 // 当日流水
    }
  },
  mounted() {
    this.queryMoney()
    this.setOrder()
    this.setuser()
    this.theDayNum()
    this.theDayReg()
    this.theDayPrice()
  },
  methods: {
    // 查询所有订单流水
    async queryMoney() {
      const res = await queryMoney()
      if (res.code !== 200) return this.$message.error('获取失败')
      this.Money = res.data[0].total
    },
    // 获取订单数量
    async setOrder() {
      const res = await setOrder()
      if (res.code !== 200) return this.$message.error('获取失败')
      this.orderNum = res.data
    },
    // 获取用户人数
    async setuser() {
      const res = await setuser()
      if (res.code !== 200) return this.$message.error('获取失败')
      this.usertableList = res.data
    },
    // 查询当日下单单数
    theDayNum() {
      theDayNum().then(res => {
        this.theDayList = res.data
      })
    },
    // 查询当日注册数量
    theDayReg() {
      theDayReg().then(res => {
        this.theDayRegList = res.data
      })
    },
    // 查询当日流水
    theDayPrice() {
      theDayPrice().then(res => {
        this.DayPrice = res.data[0].price
      })
    }
  }
}
</script>

<style lang="scss">
.textB{
  margin-left: 20px;
}
</style>
